<template>
	<view>
		<view>
			<view class="wieww670">
				<block v-for="(item,idx) in recordsBk" :key="idx">
					<view class="weui-flex articleBody" @tap.stop="details(item,idx)">
						<view class="articleView">
							<view class="articleContent text-line">
								{{item.articleTitle}}
							</view>
							<view class="lockbody">
								<view class="lockView"></view>{{item.readNum}}
							</view>
						</view>
						<view class="articleImage">
							<u-lazy-load border-radius="10" height="160" img-mode="aspectFill" :image="item.coverUrl">
							</u-lazy-load>
						</view>
					</view>
					<u-line v-show="idx !=articleList.length-1" class="u-line"></u-line>
				</block>
			</view>
		</view>
	</view>
</template>

<script>

import uLine from "@/uview-ui/components/u-line/u-line.vue"
import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"

	export default {
		components: {
			uLazyLoad,
			uLine,
		},
		data() {
			return {
				upPage: '',
				loadingone: false,
				id: '', //任务数据
				task: '',
				stepId: '',
				givePoint: '', //文章阅读数据
				recordsBk: [], //当前数组
				articleList: [],
				list: [],
				current: 0,
				sectionCurrent: 0,
				keyword: '',
				classifyId: 0, //当前
				pageSize: 6, //每页加载
				pageCurrent: 1, //分页下标
			}
		},
		created() {
			this.articleBk(this.classifyId, this.pageCurrent, this.pageSize, false) //获取百科
		},
		methods: {
			// 获取当前分类百科
			articleBk(classifyId, pageCurrent, pageSize, loay) {
				let _this = this;
				this.pageCurrent = pageCurrent;
				this.$cms.get(global.apiUrls.articleBk + '?classifyId=' + classifyId + '&pageCurrent=' + pageCurrent +
					'&pageSize=' + pageSize, {}).then(res => {
					// console.log(res)
					if (loay) {
						let recordsBk = res.data.result.records;
						_this.recordsBk = _this.recordsBk.concat(recordsBk) //当前推荐百科
					} else {
						let recordsBk = res.data.result.records;
						_this.recordsBk = recordsBk //当前推荐百科
					}
				})
			},
			tabListBk(receiver) {
				this.loadingone = true;
				let _this = this;
				this.$cms.get(global.apiUrls.tabListBk + '?receiver=' + receiver, {}).then(res => {
					if (res.data.code == 1000) {
						let result = res.data.result;
						result.unshift({
							classifyName: '推荐',
							classifyId: 0
						})
						for (let i = 0; i < result.length; i++) {
							result[i].name = result[i].classifyName
						}
						_this.list = result
						_this.loadingone = false;
					}
				})
			},
			details(item, idx) {
				uni.navigateTo({
					url: '/pages/subpackage/find/articleDetails/details?id=' + item.articleId + '&task' + this
						.task + '&stepId=' + this.stepId + '&givePoint=' + this.givePoint + '&page=' + this.upPage
				})
			},
			searchValue(e) {
				console.log(e)
				if (e != '') {
					this.tabsShow = false
				} else {
					this.tabsShow = true
				}
			},
			change(index) {
				this.current = index;
				let list = this.list;
				let classifyId = list[index].classifyId;
				this.classifyId = classifyId;
				this.articleBk(classifyId, 1, this.pageSize, false) //获取百科
			},
			pullUpLoading() { //分页加载
				let pageCurrent = this.pageCurrent += 1,
					pageSize = this.pageSize;
				this.articleBk(this.classifyId, pageCurrent, pageSize, true) //获取百科
			},
		}
	}
</script>

<style>
	.tabsView {
		background: #F5F5F5;
	}

	.wieww670 {
		width: 706upx;
		background: #FFFFFF;
		border-radius: 25upx;
		margin: 24upx auto 0;
	}

	.articleBody {
		padding: 30upx 26upx;
	}

	.articleContent {
		width: 440upx;
		height: 84upx;
		font-size: 30upx;
		font-weight: 500;
		color: #333333;
		line-height: 42upx;
	}

	.articleImage {
		width: 200upx;
		height: 160upx;
	}

	.lockbody {
		padding: 45upx 0 0;
		font-size: 26upx;
		font-weight: 400;
		color: #999999;
		line-height: 37upx
	}

	.lockView {
		width: 50upx;
		height: 28upx;
		background: #C0C4CC;
		float: left;
		background: url(http://static.bsyjk.cn/seeIcon/37C6382B372045CCB803A7F2DE1D24EA.png)no-repeat;
		background-size: 44upx 28upx;
	}
</style>
